import React, { memo } from 'react';
import { NavLink } from 'react-router-dom';
import { Input,Button } from 'antd';
import { SearchOutlined } from '@ant-design/icons';

import { headerLinks } from '@/common/loca_data';
import { HeaderWrapper, HeaderLeft, HeaderRight } from './style';

export default memo(function JPAppHeader() {
  const showSelectItem = (item) => {
    return item.to ? (
      <NavLink to={item.to} exact>{item.title}</NavLink>
    ) : (
      <a href={item.link} target="_blank" rel="noreferrer">
        {item.title}
      </a>
    );
  };

  return (
    <HeaderWrapper>
      <div className="content wrap-v1">
        {/* <NavLink to="/">发现音乐</NavLink>
        <NavLink to="mine">我的音乐</NavLink>
        <NavLink to="friend">朋友</NavLink> */}
        <HeaderLeft>
          <a className="logo sprite_01" href="#/">
            网易云音乐
          </a>

          <div className="select_list">
            {headerLinks.map((item) => {
              return (
                <div className="select_item" key={item.title}>
                  {showSelectItem(item)}
                </div>
              );
            })}
          </div>
        </HeaderLeft>
        <HeaderRight>
          <Input
            className="search"
            size="large"
            placeholder="音乐/视频/用户"
            prefix={<SearchOutlined />}
          />

          <Button ghost shape="round" className="center">
            创作者中心
          </Button>

          <Button type="link" className="login">
            登录
          </Button>
        </HeaderRight>
      </div>
      <div className="divider"></div>
    </HeaderWrapper>
  );
});
